<template>
	<view :class="mode">
		<view :class="mode=='pc'?'py-8':'p-2'"
			style="background: linear-gradient( 180deg, #597EF7 20%, rgba(89,126,247,0) 100%) no-repeat;">
			<view class="mx-auto bg-white rounded-md" :class="mode=='pc'?'max-w-1200 p-6':'p-2'">
				<view class="flex justify-between items-center">
					<view class="text-xl">{{title}}</view>
					<!-- <view class="cursor-pointer" style="color: #597EF7;font-size: 12px;">?账号申请教程</view> -->
				</view>
				<view class="flex flex-wrap gap-4 py-4">
					<view v-for="(item,index) in btnList" :key="index" :class="{'activeBtn':activeIndex==item.path}"
						@click="clickBtn(item)"
						class="border border-black__10 flex items-center rounded py-3 cursor-pointer justify-center"
						style="width: 280rpx;">
						<image :src="item.icon" style="width: 24px; height: 24px;"></image>
						<view class="ml-2">{{item.text}}</view>
					</view>
				</view>
				<el-form :model="form" label-width="auto" inline size="default">
					<el-form-item label="UID">
						<el-input v-model="form.uid" placeholder="请输入" style="width: 505rpx;"/>
					</el-form-item>
					<el-form-item label="账号">
						<el-input v-model="form.name" placeholder="请输入" style="width: 505rpx;"/>
					</el-form-item>
					<el-form-item label="">
						<el-button type="primary" @click="onSubmit">搜索</el-button>
						<el-button>重置</el-button>
					</el-form-item>
				</el-form>
				<view class="flex flex-col justify-center p-4 items-center">
					<image src="/static/home/notauth-img.png" style="width:140px;height: 100px;margin: auto;"></image>
					<view class="text-black__50 py-4">请前往登录，或注册账号获取权限！</view>
					<view class="flex">
						<el-button type="primary" @click="onSubmit">登录</el-button>
						<el-button>注册</el-button>
					</view>
				</view>
				
			</view>
		</view>


		<footerPage></footerPage>
		<tabBar v-if="mode=='app'"></tabBar>
		<appMeum v-if="mode=='app'"></appMeum>
	</view>
</template>

<script>
	
	import {
		mapState,
		mapActions
	} from 'vuex'
	export default {
		data() {
			return {
				title: '谷歌账号',
				activeIndex: '/pages/account/googleCloud/googleCloud',
				btnList: [{
						icon: '/static/home/aliyun_icon.png',
						text: '阿里云国际',
						path: '/pages/account/aliyun/aliyun'
					},
					{
						icon: '/static/home/tencent_icon.png',
						text: '腾讯云国际',
						path: '/pages/account/tencentCloud/tencentCloud'
					},
					{
						icon: '/static/home/aws_icon.png',
						text: 'AWS国际',
						path: '/pages/account/AWSCloud/AWSCloud'
					},
					{
						icon: '/static/home/gcp_icon.png',
						text: '谷歌云国际',
						path: '/pages/account/googleCloud/googleCloud'
					}
				],
				form:{
					
				}

			}
		},
		computed: {
			...mapState({
				mode:state=>state.app.mode
			})
		},
		methods: {
			// 点击按钮
			clickBtn(row) {
				this.activeIndex = row.path
				uni.reLaunch({
					url: row.path
				});

			},

		}
	}
</script>

<style scoped lang="scss">
	.pc {}

	.app {
		width: 100%;
		padding-bottom: 120rpx;
	}

	.activeBtn {
		color: #597EF7;
		border-color: #597EF7;
	}
</style>